diff options
| author | Factiven <[email protected]> | 2023-05-15 19:56:04 +0700 |
|---|---|---|
| committer | Factiven <[email protected]> | 2023-05-15 19:56:04 +0700 |
| commit | df7dcb6b5d117c5df9e902233a27283cb1c250a1 (patch) | |
| tree | 2f33aea563ba5410cb8d94d5c8f9151bea3ea4ee /pages/anime/watch/[...info].js | |
| parent | Merge branch 'pre-production' into main (diff) | |
| download | moopa-df7dcb6b5d117c5df9e902233a27283cb1c250a1.tar.xz moopa-df7dcb6b5d117c5df9e902233a27283cb1c250a1.zip | |
Update v3.5.6
> Added Episode selector
Diffstat (limited to 'pages/anime/watch/[...info].js')
| -rw-r--r-- | pages/anime/watch/[...info].js | 90 |
1 files changed, 76 insertions, 14 deletions
diff --git a/pages/anime/watch/[...info].js b/pages/anime/watch/[...info].js index 13b9980..29adfd5 100644 --- a/pages/anime/watch/[...info].js +++ b/pages/anime/watch/[...info].js @@ -12,6 +12,8 @@ import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; import "react-loading-skeleton/dist/skeleton.css"; import { Navigasi } from "../.."; +import { ChevronDownIcon, ForwardIcon } from "@heroicons/react/24/solid"; +import { useRouter } from "next/router"; const VideoPlayer = dynamic(() => import("../../../components/videoPlayer", { ssr: false }) @@ -28,6 +30,8 @@ export default function Info({ sessions, id, aniId, provider }) { const [playingTitle, setPlayingTitle] = useState(null); const [poster, setPoster] = useState(null); + const router = useRouter(); + useEffect(() => { const defaultState = { epiData: null, @@ -276,7 +280,7 @@ export default function Info({ sessions, id, aniId, provider }) { return ( <> <Head> - <title>{playingTitle}</title> + <title>{playingTitle || "Loading..."}</title> </Head> <SkeletonTheme baseColor="#232329" highlightColor="#2a2a32"> @@ -308,21 +312,79 @@ export default function Info({ sessions, id, aniId, provider }) { data.episodes.length > 0 ? ( data.episodes .filter((items) => items.id == id) - .map((item) => ( - <div key={item.id} className="p-3 grid gap-2"> - <div className="text-xl font-outfit font-semibold line-clamp-2"> - <Link - href={`/anime/${data.id}`} - className="inline hover:underline" + .map((item, index) => ( + <div className="flex justify-between" key={index}> + <div key={item.id} className="p-3 grid gap-2 w-[60%]"> + <div className="text-xl font-outfit font-semibold line-clamp-1"> + <Link + href={`/anime/${data.id}`} + className="inline hover:underline" + > + {item.title || + data.title.romaji || + data.title.english} + </Link> + </div> + <h4 className="text-sm font-karla font-light"> + Episode {item.number} + </h4> + </div> + <div className="w-[50%] flex gap-4 items-center justify-end px-4"> + <div className="relative"> + <select + className="flex items-center gap-5 rounded-[3px] bg-secondary py-1 px-3 pr-8 font-karla appearance-none cursor-pointer" + value={item.number} + onChange={(e) => { + const selectedEpisode = data.episodes.find( + (episode) => + episode.number === + parseInt(e.target.value) + ); + router.push( + `/anime/watch/${selectedEpisode.id}/${data.id}` + ); + }} + > + {data.episodes.map((episode) => ( + <option + key={episode.number} + value={episode.number} + > + Episode {episode.number} + </option> + ))} + </select> + <ChevronDownIcon className="absolute right-2 top-1/2 transform -translate-y-1/2 w-5 h-5 pointer-events-none" /> + </div> + <button + className={`${ + item.number === data.episodes.length + ? "pointer-events-none" + : "" + } relative group`} + onClick={() => { + const currentEpisodeIndex = + data.episodes.findIndex( + (episode) => episode.number === item.number + ); + if ( + currentEpisodeIndex !== -1 && + currentEpisodeIndex < data.episodes.length - 1 + ) { + const nextEpisode = + data.episodes[currentEpisodeIndex + 1]; + router.push( + `/anime/watch/${nextEpisode.id}/${data.id}` + ); + } + }} > - {item.title || - data.title.romaji || - data.title.english} - </Link> + <span className="absolute z-[9999] -left-11 -top-14 p-2 shadow-xl rounded-md transform transition-all whitespace-nowrap bg-secondary lg:group-hover:block group-hover:opacity-1 hidden font-karla font-bold"> + Next Episode + </span> + <ForwardIcon className="w-6 h-6" /> + </button> </div> - <h4 className="text-sm font-karla font-light"> - Episode {item.number} - </h4> </div> )) ) : ( |